<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="enum" uri="http://www.daxia.com/enum" %>
<div>
	<div class="full-height-scroll">
		<div class="table-responsive" id="orderlist">
			<table id="table" data-toggle="table" width="100%" data-height="600" data-click-to-select="true" data-mobile-responsive="true" data-undefined-text="">
				 <thead>
                     <tr style="line-height: 40px;background: #eee;">
                          <th data-field="id">商品信息</th>
                          <th data-field="orderNo">数量</th>
                          <th data-field="user">金额（元）</th>
                          <th data-field="status">交易状态</th>
                          <th data-field="invoiceTitle">操作</th>
                      	</tr>
                   </thead>
				<tbody>
					<c:if test="${not empty list }">
						<c:forEach items="${list }" var="n" varStatus="idx">
							<tr class="order_myorder_item">
								<td colspan="5">订单号：${n.orderNo }<span style="padding-left:20px;"><fmt:formatDate value="${n.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></span></td>
							</tr>
							<tr class="orderitem-title"  style="border-top:1px solid #ccc;border-bottom:1px solid #ccc;">
								<td colspan="5"><img src="${n.user.headImage }" class="orderlist-image"/><label>${n.user.username }</label></td>
							</tr>
							<c:forEach items="${n.orderItems }" var="o" varStatus="idxT">
							<tr data-index="${idxT.index }" style="border-bottom:1px solid #ccc;">
								<td ><img src="${o.product.headImage }" width="80px" height="80px" class="orderitem-img"/>${o.product.name }</td>
								<td style="">${o.quantity }</td>
								<td style="">${o.payPrice}</td>
								<td style="">${enum:list('OrderStatus', n.status)}<br/>
									<a data-id="${n.id }" class="orderA">订单详情</a>
								</td>
								<td style=""></td>
							</tr>
							</c:forEach>
						</c:forEach>
					</c:if>
					<c:if test="${empty list }">
					暂无数据
					</c:if>
				</tbody>
			</table>
        </div>
    </div>
</div>
<div class="row">
	<div class="col-sm-6">
		<div class="dataTables_info" id="DataTables_Table_0_info"
			role="alert" aria-live="polite" aria-relevant="all">显示第 ${(page.page - 1) * page.pageSize  + 1}
			到第 ${(page.page) * page.pageSize} 项，共 ${page.totalRecords } 项</div>
	</div>
	<div class="col-sm-6">
		<div class="dataTables_paginate paging_simple_numbers"
			id="DataTables_Table_0_paginate">
			<ul class="pagination" id="pagination">
			</ul>
		</div>
	</div>
</div> 
<script type="text/javascript">
$('.orderA').click(function(){
	var id = $(this).attr('data-id');
	layer.open({
	    type: 2,
	    skin: 'layui-layer-rim', //加上边框
	    area: [layer_default_width, layer_default_height], //宽高
	    content: "${ctx}/admin/order/detail?id="+id,
	    btn: ['取消'],
	    yes: function(index, layero){ //或者使用btn1
	    	var detailForm = layer.getChildFrame('form', index);
	    	console.log(detailForm);
	    	detailForm.ajaxSubmit({
	    		success: function(data) {
	    			if (isSuccess(data)) {
	    				layer.close(index);
	    				reload();
	    			} else {
	    			}
	    		}
	    	});
	    }, cancel: function(index){ //或者使用btn2
	        //按钮【按钮二】的回调
	    }
	});
});
</script>	
